<!-- 新增考核内容 -->
<template>
  <div class="mod-villageExamine__examineCount">
    <back-icon></back-icon>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <div class="flex-between">
        <el-form-item label="考核内容：">
          <el-input v-model="state.dataForm.content" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button icon="Search" @click="state.getDataList()">{{ $t("query") }}</el-button>
        </el-form-item>
      </div>
      <div class="flex-between">
        <el-form-item>
          <el-button v-if="state.hasPermission('evaluation:clctypestandard:save')" type="primary" icon="Plus" @click="addOrUpdateHandle()">新增考核内容 </el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" row-key="id" border style="width: 100%">
      <el-table-column prop="content" label="考核内容" header-align="center" align="center" min-width="120"></el-table-column>
      <el-table-column prop="standardDescribe" label="标准描述" header-align="center" align="center" min-width="80"></el-table-column>
      <el-table-column prop="isCount" label="是否计数" header-align="center" align="center" min-width="80">
        <template v-slot="scope">
          <div v-if="scope.row.isCount === 0">否</div>
          <div v-else-if="scope.row.isCount === 1">是</div>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="分数" header-align="center" align="center" min-width="80"></el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" min-width="50">
        <template v-slot="scope">
          <el-button v-if="state.hasPermission('evaluation:clctypestandard:info')" type="primary" link @click="addOrUpdateHandle(scope.row.id, true)">{{ "查看" }} </el-button>
          <el-button v-if="state.hasPermission('evaluation:clctypestandard:update')" type="primary" link @click="addOrUpdateHandle(scope.row.id, false)">{{ "编辑" }} </el-button>
          <el-button v-if="state.hasPermission('evaluation:clctypestandard:delete')" type="primary" link @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }} </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-metrics-cont-draw :key="addKey" ref="addMetricsContDrawRef" @refreshDataList="state.getDataList"></add-metrics-cont-draw>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs, nextTick } from "vue";
import addMetricsContDraw from "./addMetricsContDraw.vue";
import { useRouter, useRoute } from "vue-router";
import Template from "@/views/devtools/template.vue";
import BackIcon from "@/components/backIcon.vue";

const { query } = useRoute();
const view = reactive({
  dataListQueryType: "get",
  getDataListURL: `/evaluation/clctypestandard/page`,
  getDataListIsPage: true,
  deleteURL: "/evaluation/clctypestandard",
  deleteIsBatch: true,
  dataList: [],
  dataForm: {
    content: "",
    typeId: query.id
  }
});

// 刷新当前页面
const router = useRouter();
const routeTo = (path: string) => {
  router.push(path);
};

const state = reactive({ ...useView(view), ...toRefs(view) });
console.log(state.dataForm);
const addMetricsContDrawRef = ref();
const addKey = ref(0);
const addOrUpdateHandle = (id?: number, dis?: boolean) => {
  addKey.value++;
  nextTick(() => {
    addMetricsContDrawRef.value.init(query.id, id, dis);
  });
};
</script>

<style lang="scss" scoped></style>
